<template>
  <div type="card">
    <template slot="header">导入 xlsx</template>
    <div class="ibps-mb">
      <el-button @click="download">
        下载演示 .xlsx 表格
      </el-button>
    </div>
    <div class="ibps-mb">
      <el-upload :before-upload="handleUpload" action="default">
        <el-button type="success">
          选择要导入的 .xlsx 表格
        </el-button>
      </el-upload>
    </div>
    <el-table v-bind="table">
       <el-table-column
      type="selection"
       @selection-change="handleSelectionChange"
      width="55">
    </el-table-column>
      <el-table-column
        v-for="(item, index) in table.columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      />
    </el-table>
  </div>
</template>

<script>
import Import from '../../../import/index'

export default {
  data() {
    return {
      table: {
        columns: [],
        data: [],
        stripe: true,
        border: true
      }
    }
  },
  methods: {
    handleSelectionChange(a,b,c,d){
      console.log(a,b,c,d)
    },
    handleUpload(file) {
      Import.xlsx(file)
        .then(({ header, results }) => {
          this.table.columns = header.map(e => {
            return {
              label: e,
              prop: e
            }
          })
          this.table.data = results
        })
      return false
    },
    download() {
      window.location.href = 'http://www.bpmhome.cn/ibps-admin-import-xlsx-demo.xlsx'
    }
  }
}
</script>
